<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>-->
    <!-- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>-->
    <!-- <![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="../jquery.min.js"></script>
<script src="../echarts/echarts.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>

<script>
    const serverInfoUrl = "http://localhost:8081/stat/server_msg_in";

    const time = [];
    const msgNameToEchartsMap = new Map();
    const eChartToMsgDataMap = new Map();
    const param = ['avg', 'max', 'min', 'rate']

    const initDataFunction = function initData() {
        $.get(serverInfoUrl).done(function (data) {
            for (const msgStatData of data.values()) {
                const time = data.a;
                const msgStatData = data.b;
                const jsonInTrafficsData = msgStatData.body.netTrafficStat.inTraffics;
                const xAxisData = Object.keys(jsonInTrafficsData);
                for (let msgName of xAxisData.values()) {
                    $("body").append('<div class="container" id=' + msgName + ' style="width:2000px; height: 400px;"></div>')
                    const chartDom = document.getElementById(msgName);
                    const myChart = echarts.init(chartDom);

                    msgNameToEchartsMap.set(msgName, myChart);
                    eChartToMsgDataMap.set(myChart, buildMsgNameToDataMap())

                    myChart.setOption({
                        title: {
                            text: msgName
                        },
                        legend: {
                            data: param
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: time
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: 'avg',
                                type: 'line',
                                data: []
                            },
                            {
                                name: 'max',
                                type: 'line',
                                data: []
                            },
                            {
                                name: 'min',
                                type: 'line',
                                data: []
                            },
                            {
                                name: 'rate',
                                type: 'line',
                                data: []
                            }
                        ]
                    })

                    window.addEventListener('resize', function () {
                        myChart.resize();
                    })
                }
            }
        });
    };

    function initParamMap(msgNameToDataMap){
        for (const para of param) {
            msgNameToDataMap.set(para, []);
        }
    }

    function buildMsgNameToDataMap() {
        const msgNameToDataMap = new Map();
        initParamMap(msgNameToDataMap)
        return msgNameToDataMap;
    }

    function getParamArray(eCharsIns) {
        return eChartToMsgDataMap.get(eCharsIns);
    }

    $(document).ready(initDataFunction)

    function updateData() {

        $.get(serverInfoUrl).done(function (data) {
            const jsonInTrafficsData = data.body.netTrafficStat.inTraffics;
            const xAxisData = Object.keys(jsonInTrafficsData);
            for (let msgName of xAxisData.values()) {
                const eCharIns = msgNameToEchartsMap.get(msgName);
                if (eCharIns == null) {
                    continue;
                }
                const msgData = jsonInTrafficsData[msgName];
                const dataList = getParamArray(eCharIns)
                for (const para of param) {
                    const arr = dataList.get(para);
                    if (arr.length > 100){
                        arr.shift()
                    }
                    arr.push(msgData[para]);
                }
                // 填入数据
                eCharIns.setOption({
                    xAxis: {
                        data: time
                    },
                    series: [
                        {
                            name: 'avg',
                            type: 'line',
                            data: dataList.get('avg')
                        },
                        {
                            name: 'count',
                            type: 'line',
                            data: dataList.get('count')
                        },
                        {
                            name: 'max',
                            type: 'line',
                            data: dataList.get('max')
                        },
                        {
                            name: 'min',
                            type: 'line',
                            data: dataList.get('min')
                        },
                        {
                            name: 'rate',
                            type: 'line',
                            data: dataList.get('rate')
                        }
                    ]
                });
            }
        });
    }

    setInterval(function () {
        updateData()
        time.shift()
        time.push(new Date())
    }, 10000);
</script>

</body>
</html>